<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<!--<meta name="MobileOptimized" content="320"/>-->
		<title>Hello H5+</title>
		<script type="text/javascript" src="js/common.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content{padding: 20px;margin-top: 20px;}
			#alipay{background-color: #35d0c9 !important;color: #fff !important;border: none !important;}
			#wxpay{background-color: #35d0c9 !important;color: #fff !important;border: none !important;}
			#total{background-color: transparent !important;border: none !important;border-bottom: solid 1px #35d0c9 !important;text-align: center !important;margin-bottom: 0px !important;}
		</style>
		<script type="text/javascript">
			var pays = {};

			function plusReady() {
				// 获取支付通道
				plus.payment.getChannels(function(channels) {
					var content = document.getElementById('dcontent');
					var info = document.getElementById("info");
					var txt = "支付通道信息：";
					for(var i in channels) {
						var channel = channels[i];
						if(channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道：暂不支持360相关支付
							continue;
						}
						pays[channel.id] = channel;
						txt += "id:" + channel.id + ", ";
						txt += "description:" + channel.description + ", ";
						txt += "serviceReady:" + channel.serviceReady + "； ";
						var de = document.createElement('div');
						de.setAttribute('class', 'button');
						de.setAttribute('onclick', 'pay(this.id)');
						de.id = channel.id;
						de.innerText = channel.description + "支付";
						content.appendChild(de);
						checkServices(channel);
					}
//					info.innerText = txt;
				}, function(e) {
					outLine("获取支付通道失败：" + e.message);
				});
			}
			document.addEventListener('plusready', plusReady, false);
			// 检测是否安装支付服务
			function checkServices(pc) {
				if(!pc.serviceReady) {
					var txt = null;
					switch(pc.id) {
						case "alipay":
							txt = "检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？";
							break;
						default:
							txt = "系统未安装“" + pc.description + "”服务，无法完成支付，是否立即安装？";
							break;
					}
					plus.nativeUI.confirm(txt, function(e) {
						if(e.index == 0) {
							pc.installService();
						}
					}, pc.description);
				}
			}

			var w = null;
//			var PAYSERVER = 'http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
//			var PAYSERVER = 'http://192.168.0.167/alipayrsa2/index.php?total=0.01';
//          var PAYSERVER = 'http://192.168.0.167/app/api/alipay?total=0.01';
//          var PAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpayv3.php?total=';
            var PAYSERVER;
			// 支付
			function pay(id) {
				if(w) {
					return;
				} //检查是否请求订单中
//				if(id === 'appleiap') {
////					outSet("应用内支付");
//					clicked('payment_iap.html');
//					return;
//				}
//				outSet("----- 请求支付 -----");
                //test  s
                if(id=='alipay'){
                	PAYSERVER='http://192.168.0.167/app/api/alipay?total=0.01';
                }
                if(id=='wxpay'){
                	PAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpayv3.php?total=';
                }
                //test  e                
				var url = PAYSERVER;
				if(id == 'alipay' || id == 'wxpay') {
					url += id;
				} else {
					plus.nativeUI.alert("当前环境不支持此支付通道！", null, "捐赠");
					return;
				}
				var appid = plus.runtime.appid;
				if(navigator.userAgent.indexOf('StreamApp') >= 0) {
					appid = 'Stream';
				}
				url += '?appid=' + appid + '&total=';
				
				
//              url=url;
				w = plus.nativeUI.showWaiting();
				// 请求支付订单
				var amount = document.getElementById('total').value;
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					switch(xhr.readyState) {
						case 4:
							w.close();
							w = null;
							if(xhr.status == 200) {
//								outLine("----- 请求订单成功 -----");
//								outLine(xhr.responseText);
								var order = xhr.responseText;
//								alert(pays[id]);

								plus.payment.request(pays[id], order, function(result) {
									alert("test");
//									outLine("----- 支付成功 -----");
//									outLine(JSON.stringify(result));
									plus.nativeUI.alert("支付成功：感谢你的支持，我们会继续努力完善产品。", function() {
										back();
									}, "捐赠");
								}, function(e) {
//									outLine("----- 支付失败 -----");
									alert("[" + e.code + "zz"+e.innerCode+"]：" + e.message);
									plus.nativeUI.alert("更多错误信息请参考支付(Payment)规范文档：",null, "支付失败：" + e.code);
								});
							} else {
//								outLine("----- 请求订单失败 -----");
//								outLine(xhr.status);
								plus.nativeUI.alert("获取订单信息失败！"+xhr.status, null, "捐赠");
							}
							break;
						default:
							break;
					}
				}
				xhr.open('GET', PAYSERVER);
//				alert(url + amount);
//				outLine("请求支付订单：" + url + amount);
				xhr.send();
			}
		</script>
		<link rel="stylesheet" href="common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			#total {-webkit-user-select: text;text-align: right;padding: 0 1em;border: 0px;border-bottom: 1px solid #ECB100;
					border-radius: 0;font-size: 16px;width: 30%;outline: none;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">支付</h1>
		</header>
		<div id="dcontent" class="dcontent mui-content">
			<!--<br/>
			<p id="info" style="padding: 0 1em;text-align:left;">支付通道信息：
			</p>
			<div style="padding: 0.5em 1em;">
				<hr color="#EEE" />
			</div>
			<p style="padding: 0 1em;text-align:left;">为DCloud提供的免费软件进行赞助吧。</p>
			<br/>-->
			<div style="padding: 0 1em;text-align:left">
				捐赠金额：<input id="total" type="number" value="1" /> 元
			</div>
			<br/>
			<!--<div class="button" onclick="clicked('payment_iap.html')">Apple IAP</div>-->
		</div>
		<!--<div id="output">
			Payment模块管理支付功能，可通过js调用第三方支付服务。通过plus.payment可获取支付管理对象。
		</div>-->
	</body>
	<script type="text/javascript" src="immersed.js"></script>

</html>